<template>
  <jke-modal
      :visible.sync="jkeForm.visible"
      :width="1200"
      :title="jkeForm.title"
      :fullscreen.sync="jkeForm.fullscreen"
      :switchFullscreen="jkeForm.switchFullscreen"
    >
    <!--  -->
    <crumbs @goBack="goBack" :superiorMenu="['生产管理','不合格品处理待执行']" marginBottom="10px" currentMenu="报废入库"></crumbs>
    <div class="form-body">
      <div class="cards-box">
        <a-card title="处理信息" :bordered="false">
          <div class="item-wrap">
            <div class="detail-item">
              <p class="subtitle">工单编号</p>
              <p class="secondary-text">{{ scrapForm.orderCode }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">生产产品</p>
              <p class="secondary-text">{{ scrapForm.goodsName }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">规格</p>
              <p class="secondary-text">{{ scrapForm.spec }}</p>
            </div>
          </div>
          <div class="item-wrap">
            <div class="detail-item">
              <p class="subtitle">工序</p>
              <p class="secondary-text">{{ scrapForm.processFullName }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">基本单位</p>
              <p class="secondary-text">{{ scrapForm.basicUnitText }}</p>
            </div>
            <div class="detail-item"></div>
          </div>
          <div class="item-wrap">
            <div class="detail-item">
              <p class="subtitle">操作人</p>
              <p class="secondary-text">{{ scrapForm.operatorIdText }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">提交人</p>
              <p class="secondary-text">{{ scrapForm.applicantIdText }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">提交时间</p>
              <p class="secondary-text">{{ scrapForm.applyTime }}</p>
            </div>
          </div>
          <div class="item-wrap">
            <div class="detail-item">
              <p class="subtitle">处理类型</p>
              <p class="secondary-text">{{ scrapForm.handleTypeText }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">处理人</p>
              <p class="secondary-text">{{ scrapForm.handlerIdText }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">处理时间</p>
              <p class="secondary-text">{{ scrapForm.handleTime }}</p>
            </div>
          </div>
        </a-card>
        <a-card title="执行信息" :bordered="false" style="margin-top:12px">
          <div class="item-wrap" style="margin-bottom: 40px">
            <div class="detail-item">
              <p class="subtitle">批次编号</p>
              <p class="btn-text" @click="batchRecord">{{ scrapForm.batchCode || '-' }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">处理数量</p>
              <p class="secondary-text">{{ scrapForm.num || '-' }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">处理单位</p>
              <p class="secondary-text">{{ scrapForm.reportWorkUnitText || '-' }}</p>
            </div>
          </div>
          <a-form-model  layout="vertical">
            <a-form-model-item label="备注" style="flex:1">
              <a-textarea placeholder="请输入" :maxLength="500" v-model="scrapForm.remark" auto-size />
            </a-form-model-item>
          </a-form-model>
          <a-form-model  layout="vertical">
            <a-form-model-item label="附件" style="flex:1">
              <file-upload :ids="scrapForm.attachment" @getFileList="getFileList"></file-upload>
              <p style="line-height: 30px;color:#8d8d8d;">最多上传5个文件，每个大小不可超过20M</p>
            </a-form-model-item>
          </a-form-model>
        </a-card>
      </div>
    </div>

    <div class="footer-submit form-footer">
      <a-button type="primary" :loading="loadingSubmit" @click="handleSubmit">
        提交
      </a-button>
    </div>
    <batch-production ref="BatchProduction"></batch-production>
  </jke-modal>
</template>
<script>
import crumbs from '@/components/crumbs.vue'
import FileUpload from '@/components/fileActions/FileUpload.vue'
import { API } from '@/api/requestFzs'
import moment from 'dayjs'
import { integerNum, validateDuplicateValue } from '@/utils/util'
import BatchProduction from '@/pubComponent/BatchProduction'
export default {
  data() {
    return {
      jkeForm: {
        title: '报废入库',
        visible: false,
        fullscreen: true,
        switchFullscreen: true,
      },
      validateDuplicateValue,
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'coordinated' }),
      attachment: '',
      pageTitle: '新建设备',
      submitApi: API.messDeviceAdd,
      isEdit: false,
      queryId: '',
      scrapForm: {
        attachment: '',
        remark: ''
      },
      loadingSubmit: false
    }
  },
  components: {
    FileUpload,
    crumbs,
    BatchProduction
  },
  methods: {
    // 批次生产记录弹窗列表
    batchRecord() {
      let obj = {
        id: this.scrapForm.batchId,
        orderId: this.scrapForm.orderId,
        batchCode: this.scrapForm.batchCode,
      }
      this.$refs.BatchProduction.showModal(obj,'D')
    },
    changeWarranty(v) {
      console.log(v)
      this.$nextTick(() => {
        this.form.setFieldsValue({
          warranty: integerNum(v.target.value)
        })
      })
    },
    /* 面包屑返回 */
    goBack() {
      this.jkeForm.visible = false
    },
    /* 获取编辑详情 */
    initForm(query) {
      this.jkeForm.visible = true
      this.scrapForm = {
        ...query.formData,
        ...this.scrapForm
      }
    },
    /* 自动生成 */
    genEntityCode() {
      API.genEntityCode({entityCode: 'MESS_DEVICE'}).then(res => {
        if (res.code == 200) {
          this.form.setFieldsValue({
            deviceCode: res.result
          })
        } else {
          this.$antdMessage.error(res.message)
        }
      })
    },
    /* 获取附件 */
    getFileList(v) {
      this.scrapForm.attachment = v
      console.log('上传的附件id：', v)
    },
    handleSubmit() {
      this.loadingSubmit = true
      API.messNotQualityHandleIinfoDetailExecuteScrap(this.scrapForm).then(res => {
        this.loadingSubmit = false
        if (res.code == 200) {
          this.$antdMessage.success('报废成功！')
          this.goBack()
        } else {
          this.$antdMessage.error(res.message)
        }
      })
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';
/deep/.ant-form-vertical {
  display: flex;
  justify-content: space-between;
  .ant-form-item {
    width: 30%;
  }
}
.form-body {
  height: calc(100vh - 120px);
  overflow-y: scroll;
}
.form-footer {
  margin: 12px -12px 0 -12px;
}
.code-btn {
  position: absolute;
  right: 0;
  top: -34.5px;
}
.item-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.item-wrap:nth-of-type(n+2) {
  margin-top: 40px;
}
.detail-item {
  width: 30%;
}
.bd-line {
  height: 1px;
  background: @greyBorder;
  margin: -12px -40px 24px -40px;
}
.cards-box {
  height: calc(100vh - 120px);
  overflow-y: scroll;
}
</style>
